﻿<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 2D矩阵变形效果</title>
        <style>
            div {
                width: 100px;
                height: 50px;
                margin: 20px;
                border: 1px solid;
                display: inline-block;
                text-align: center;
                padding: 20px;
            }

            /* matrix() */
            div.style1 {
                transform: matrix(0,1,1,1,10,10);
                -ms-transform: matrix(0,1,1,1,10,10); /* IE 9 */
                -moz-transform: matrix(0,1,1,1,10,10); /* Firefox */
                -webkit-transform: matrix(0,1,1,1,10,10); /* Safari and Chrome */
                -o-transform: matrix(0,1,1,1,10,10); /* Opera */
            }
        </style>
    </head>
    <body>
        <h3>CSS3 2D矩阵变形效果</h3>
        <div>原图</div>
        使用matrix()方法进行位移
        <div class="style1">
            我进行了矩阵变化
        </div>
    </body>
</html>